<template>
	<view class="content">
		<swiper class="swiper" :style="`height:${SwiperHeight}px`" :indicator-dots="indicatorDots" :autoplay="autoplay"
			:interval="interval" :duration="duration" indicator-active-color="rgba(217,217,217)">
			<swiper-item>
				<view class="swiper-item">
					<image class="banner" mode="widthFix" src="/static/1.png"></image>
				</view>
			</swiper-item>
			<swiper-item>
				<view class="swiper-item">
					<image class="banner" mode="widthFix" src="/static/2.png"></image>
				</view>
			</swiper-item>
			<swiper-item>
				<view class="swiper-item">
					<image class="banner" mode="widthFix" src="/static/3.png"></image>
				</view>
			</swiper-item>
		</swiper>
		<view class="list-content">
			<h3 class="title">推荐</h3>
		</view>
		<view class="content-list">
			<view class="view1">
				<image class="icon" mode="widthFix" src="/static/90.png"></image>
			</view>
			<view class="view2">
				<view class="view2-1">
					币买卖
				</view>
				<view class="view2-2">
					简单易用的数字货币投资工具
				</view>
				<view class="view2-3"></view>
			</view>
		</view>
		<view class="content-list">
			<view class="view1">
				<image class="icon" mode="widthFix" src="/static/91.png"></image>
			</view>
			<view class="view2">
				<view class="view2-1">
					Aave
				</view>
				<view class="view2-2">
					去中心化理财，抵押DAI获取稳定收益
				</view>
				<view class="view2-3"></view>
			</view>
		</view>
		<view class="content-list">
			<view class="view1">
				<image class="icon" mode="widthFix" src="/static/33.png"></image>
			</view>
			<view class="view2">
				<view class="view2-1">
					Aave
				</view>
				<view class="view2-2">
					去中心化理财，抵押DAI获取稳定收益
				</view>
				<view class="view2-3"></view>
			</view>
		</view>
		<view class="list-content">
			<h3 class="title">DeFi</h3>
		</view>
		<view class="content-list">
			<view class="view1">
				<image class="icon" mode="widthFix" src="/static/90.png"></image>
			</view>
			<view class="view2">
				<view class="view2-1">
					币买卖
				</view>
				<view class="view2-2">
					简单易用的数字货币投资工具
				</view>
				<view class="view2-3"></view>
			</view>
		</view>
		<view class="content-list">
			<view class="view1">
				<image class="icon" mode="widthFix" src="/static/91.png"></image>
			</view>
			<view class="view2">
				<view class="view2-1">
					Aave
				</view>
				<view class="view2-2">
					去中心化理财，抵押DAI获取稳定收益
				</view>
				<view class="view2-3"></view>
			</view>
		</view>
		<view class="content-list">
			<view class="view1">
				<image class="icon" mode="widthFix" src="/static/33.png"></image>
			</view>
			<view class="view2">
				<view class="view2-1">
					Aave
				</view>
				<view class="view2-2">
					去中心化理财，抵押DAI获取稳定收益
				</view>
				<view class="view2-3"></view>
			</view>
		</view>
		<view class="list-content">
			<h3 class="title">交易</h3>
		</view>
		<view class="content-list">
			<view class="view1">
				<image class="icon" mode="widthFix" src="/static/90.png"></image>
			</view>
			<view class="view2">
				<view class="view2-1">
					币买卖
				</view>
				<view class="view2-2">
					简单易用的数字货币投资工具
				</view>
				<view class="view2-3"></view>
			</view>
		</view>
		<view class="content-list">
			<view class="view1">
				<image class="icon" mode="widthFix" src="/static/91.png"></image>
			</view>
			<view class="view2">
				<view class="view2-1">
					Aave
				</view>
				<view class="view2-2">
					去中心化理财，抵押DAI获取稳定收益
				</view>
				<view class="view2-3"></view>
			</view>
		</view>
		<view class="content-list">
			<view class="view1">
				<image class="icon" mode="widthFix" src="/static/33.png"></image>
			</view>
			<view class="view2">
				<view class="view2-1">
					Aave
				</view>
				<view class="view2-2">
					去中心化理财，抵押DAI获取稳定收益
				</view>
				<view class="view2-3"></view>
			</view>
		</view>
		<view class="list-content">
			<h3 class="title">游戏</h3>
		</view>
		<view class="content-list">
			<view class="view1">
				<image class="icon" mode="widthFix" src="/static/90.png"></image>
			</view>
			<view class="view2">
				<view class="view2-1">
					币买卖
				</view>
				<view class="view2-2">
					简单易用的数字货币投资工具
				</view>
				<view class="view2-3"></view>
			</view>
		</view>
		<view class="content-list">
			<view class="view1">
				<image class="icon" mode="widthFix" src="/static/91.png"></image>
			</view>
			<view class="view2">
				<view class="view2-1">
					Aave
				</view>
				<view class="view2-2">
					去中心化理财，抵押DAI获取稳定收益
				</view>
				<view class="view2-3"></view>
			</view>
		</view>
		<view class="content-list">
			<view class="view1">
				<image class="icon" mode="widthFix" src="/static/33.png"></image>
			</view>
			<view class="view2">
				<view class="view2-1">
					Aave
				</view>
				<view class="view2-2">
					去中心化理财，抵押DAI获取稳定收益
				</view>
				<view class="view2-3"></view>
			</view>
		</view>
		<view class="list-content">
			<h3 class="title">工具</h3>
		</view>
		<view class="content-list">
			<view class="view1">
				<image class="icon" mode="widthFix" src="/static/90.png"></image>
			</view>
			<view class="view2">
				<view class="view2-1">
					币买卖
				</view>
				<view class="view2-2">
					简单易用的数字货币投资工具
				</view>
				<view class="view2-3"></view>
			</view>
		</view>
		<view class="content-list">
			<view class="view1">
				<image class="icon" mode="widthFix" src="/static/91.png"></image>
			</view>
			<view class="view2">
				<view class="view2-1">
					Aave
				</view>
				<view class="view2-2">
					去中心化理财，抵押DAI获取稳定收益
				</view>
				<view class="view2-3"></view>
			</view>
		</view>
		<view class="content-list">
			<view class="view1">
				<image class="icon" mode="widthFix" src="/static/33.png"></image>
			</view>
			<view class="view2">
				<view class="view2-1">
					Aave
				</view>
				<view class="view2-2">
					去中心化理财，抵押DAI获取稳定收益
				</view>
				<view class="view2-3"></view>
			</view>
		</view>
		<view class="list-content">
			<h3 class="title">社交</h3>
		</view>
		<view class="content-list">
			<view class="view1">
				<image class="icon" mode="widthFix" src="/static/90.png"></image>
			</view>
			<view class="view2">
				<view class="view2-1">
					币买卖
				</view>
				<view class="view2-2">
					简单易用的数字货币投资工具
				</view>
				<view class="view2-3"></view>
			</view>
		</view>
		<view class="content-list">
			<view class="view1">
				<image class="icon" mode="widthFix" src="/static/91.png"></image>
			</view>
			<view class="view2">
				<view class="view2-1">
					Aave
				</view>
				<view class="view2-2">
					去中心化理财，抵押DAI获取稳定收益
				</view>
				<view class="view2-3"></view>
			</view>
		</view>
		<view class="content-list">
			<view class="view1">
				<image class="icon" mode="widthFix" src="/static/33.png"></image>
			</view>
			<view class="view2">
				<view class="view2-1">
					Aave
				</view>
				<view class="view2-2">
					去中心化理财，抵押DAI获取稳定收益
				</view>
			</view>
		</view>
		<view class="hengxian"></view>
		<view>
			<view class="item">
				<view class="left">
					<view class="miaoshu">如何使用DAPP</view>
				</view>
				<view class="right">
					<image class="rightImg" src="/static/right.png" mode="widthFix"></image>
				</view>
			</view>
		</view>
		<view class="oooouu"></view>
		<view>
			<view class="item">
				<view class="left">
					<view class="miaoshu">提交DAPP</view>
				</view>
				<view class="right">
					<image class="rightImg" src="/static/right.png" mode="widthFix"></image>
				</view>
			</view>
		</view>
	</view>


</template>

<script>
	export default {
		data() {
			return {
				indicatorDots: true,
				autoplay: true,
				interval: 2000,
				duration: 1000,
				SwiperHeight: 0,
				isRadio: false
			}
		},
		onLoad() {
			this.$nextTick(() => {
				this.setSwiperHeight()
			})
		},
		methods: {
			setSwiperHeight() {
				var that = this
				let width = 1080
				let height = 590
				uni.getSystemInfo({
					success: function(res) {
						console.log(res.windowWidth);
						console.log(res.windowHeight);

						that.SwiperHeight = (res.windowWidth / width * height)


					}
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		display: flex;
		flex-direction: column;
	}

	.swiper {
		width: 100%;
	}

	.swiper-item {
		width: 100%;
		height: auto;
	}

	.banner {
		width: 100%;
	}


	//设置轮播的指示点大小
	.uni-swiper-wrapper {
		/deep/ .uni-swiper-dots {
			// 指示点整个区域
			bottom: 200rpx;
		}

	}

	.list-content {
		display: flex;
		flex-direction: column;
		justify-content: center;
		padding: 40rpx;
		box-sizing: border-box;
	}

	.title {
		font-size: 1rem;
	}

	.icon {
		width: 100%;
	}

	.content-list {
		margin-left: 40rpx;
		height: 140rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		justify-content: space-around;
	}

	.view1 {
		width: 120rpx;
		height: 120rpx;
	}

	.view2 {
		margin-left: 40rpx;
		width: 100%;
	}

	.view2-1 {
		color: #0d0d0d;
		margin-bottom: 10rpx;
		font-size: 1rem;
	}

	.view2-2 {
		color: #7a7a7a;
		margin-top: 10rpx;
		font-size: 0.8rem;
	}

	.view2-3 {
		height: 0.5px;
		width: 100%;
		margin-top: 40rpx;
		background-color: #e3e3e3;
	}

	.hengxian {
		width: 100%;
		height: 30rpx;
		background-color: #f8f8f8;
	}
	.item {
		display: flex;
		flex-direction: row;
		padding: 25rpx 25rpx;
		height: 120rpx;
		align-items: center;
		justify-content: center;
		box-sizing: border-box;
	
	}
	.oooouu{
		height: 0.5px;
		width: 100%;
		margin-left: 20rpx;
		background-color: #e3e3e3;
	}

	.left {
		display: flex;
		flex-direction: column;
		flex: 1;
		justify-content: center;
	
	
	}

	
	.miaoshu {
		margin-top: 10rpx;
		font-size: 30rpx;
		color: #0d0d0d;
	}
	
	.right {
		width: 30rpx;
	
	}
	
	.rightImg {
		width: 100%;
	}
</style>
